<template>
	<view class="page_box">
		<view class="content" v-if="isModified == 1" style="height: 1500rpx;">
			<view class="info">
				<view class="info1">
					<text>姓名</text>
					<u-input
						type="textarea"
						value=""
						height="60"
						v-model="username"
						placeholder="请输入您的姓名"
						placeholder-class="inputStyle"
					/>
				</view>
				<view class="info1">
					<text>手机电话</text>
					<u-input
						type="textarea"
						height="60"
						v-model="phone"
						placeholder="请输入您的手机电话"
						placeholder-class="inputStyle"
					/>
				</view>
				<view class="info1">
					<text>店铺地址</text>
					<u-input
						height="60"
						type="textarea"
						value=""
						placeholder="请输入店铺地址"
						v-model="dizhi"
						placeholder-class="inputStyle"
						@click="getMap"
					/>
				</view>
				<view class="info1">
					<text>服务小区</text>

					<u-input
						height="60"
						type="textarea"
						value=""
						v-model="community"
						placeholder="请输入您服务的小区"
						placeholder-class="inputStyle"
						@click="getMap1"
					/>
				</view>
				<view class="info1">
					<text>店名</text>

					<u-input
						height="60"
						type="textarea"
						value=""
						v-model="name"
						placeholder="请输入您的店名"
						placeholder-class="inputStyle"
					/>
				</view>

				<view class="info1">
					<text>营业时间</text>
					<u-input
						height="60"
						type="textarea"
						value=""
						v-model="hours"
						placeholder="请输入您的营业时间, 例如12:00-22:00"
						placeholder-class="inputStyle"
					/>
				</view>
				<view class="info1">
					<text>备注</text>
					<u-input
						height="60"
						type="textarea"
						value=""
						v-model="note"
						auto-height
						placeholder="请输入您的备注"
						placeholder-class="inputStyle"
					/>
				</view>
				
				<view class="surroundings">
					<text>封面图</text>
					<u-upload
						max-count="1"
						:action="action"
						:auto-upload="true"
						@on-success="success1"
						width="190rpx"
						height="190rpx"
						multiple
					></u-upload>
				</view>
				<view class="surroundings">
					<text>营业执照</text>
					<u-upload
						
						
						max-count="3"
						:action="action"
						:auto-upload="true"
						@on-success="success2"
						width="190rpx"
						height="190rpx"
						multiple
					></u-upload>
				</view>
			</view>
			<!-- <view class="protocol">
				<u-radio-group
					v-model="value1"
					wrap
					@change="jump('/pages/user/protocol')"
				>
					<u-radio
						@change="radioChange"
						v-for="(item, index) in list1"
						:key="index"
						:name="item.name"
						:disabled="item.disabled"
						active-color="#EBBD70"
					>
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</view> -->
			<view class="applyToSettleIn">
				<button type="default" @click="merchSettled()">确认上传</button>
			</view>
		</view>
		<view v-else class="content">
			<view class="info">
				<view class="info1">
					<text>姓名</text>
					<input
						type="text"
						value=""
						v-model="username"
						placeholder="请输入您的姓名"
						placeholder-class="inputStyle"
					/>
				</view>
				<view class="info1">
					<text>手机电话</text>
					<input
						type="text"
						v-model="phone"
						placeholder="请输入您的手机电话"
						placeholder-class="inputStyle"
					/>
				</view>
				<view class="info1">
					<text>备注</text>
					<input
						type="text"
						value=""
						v-model="remak"
						placeholder="请输入您的备注"
						placeholder-class="inputStyle"
					/>
				</view>
				<view class="applyToSettleIn">
					<button type="default" @click="merchSettled_a()">
						提交申请
					</button>
				</view>
			</view>
		</view>

		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
		<!-- 关注弹窗 -->
		<shopro-float-btn></shopro-float-btn>
		<!-- 连续弹窗提醒 -->
		<shopro-notice-modal></shopro-notice-modal>
		<!-- 登录提示 -->
		<shopro-login-modal></shopro-login-modal>
	</view>
</template>

<script>
import shoprpCoupon from '@/components/shopro-coupon/shopro-coupon.vue';
export default {
	components: {
		shoprpCoupon
	},
	data() {
		return {
			//
			//action: 'https://whb.qianjitianxia.com/api/bonus/wx_upload',
			action: 'https://whb.qianjitianxia.com/api/bonus/wx_upload',
			filesArr: [],

			isModified: '',
			dizhi: '',
			list: [],
			value: '我是店铺我开店',
			list1: [
				{
					name: '店铺入驻协议',
					disabled: false
				}
			],
			value1: '店铺入驻协议',
			uid: '', // id
			username: '', // 姓名
			phone: '', // 电话
			name: '', // 店名
			cover: '', // 封面图
			hours: '', // 时间
			community: '', // 服务小区
			note: '', //
			business: '',
			remak: '',
			inputHeight: 0
		};
	},
	onShow() {
		console.log(this.$u.config.v);
		this.dizhi = uni.getStorageSync('dizhi');
		this.community = this.community + uni.getStorageSync('dizhi2');
		//uni.removeStorageSync('dizhi');
		uni.removeStorageSync('dizhi2');
		console.log('this.dizhi :>> ', this.dizhi);
	},
	onLoad(e) {
		console.log('e11111111111 :>> ', e);
		
		if (e.inde==1) {
			console.log('e.inde :>> ', e.inde);
			this.isModified = e.inde;
		} else {
			console.log('e.inde :>> ', e.inde);
			this.isModified  = e.inde;
			
		}
		// 进入不同的tab栏 stManagementMde warehouse
		//this.current = this.$route.query.id;

		//this.getCouponList();
		this.getUsers();
	},
	onUnload: function () {
	    uni.reLaunch({
	      url: './tiaozhuang'
	    })
	  },
	methods: {
		inputFocus(e) {
			console.log(e, '键盘弹起');
			//var inputHeight = 0
			if (e.detail.height) {
				this.inputHeight = e.detail.height;
			}
		},
		shibai(e) {
			console.log('e 2222:>> ', e);
		},

		// 封面图
		success1(index, lists) {
			console.log('lists :>> ', lists);
			console.log('index', index);
			this.cover = index.replace(/^\"|\"$/g, '');
			//this.cover = index;
		},
		// 营业执照
		success2(index, lists) {
			console.log(index);
			this.business = index.replace(/^\"|\"$/g, '');
		},
		// 选中某个单选框时，由radio时触发11
		radioChange(e) {
			console.log('e11111 :>> ', e);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			console.log('e 1111111111:>> ', e);
			// if (e.value==0) {
				
			// }else{
				
			// }
		},

		// 获取商家信息
		async getBus() {
			if (this.uid) {
				const res = await this.$api('getBus', {
					uid: this.uid
				});
				if (res.code) {
					this.username = res.data.username;
					this.phone = res.data.phone;
					this.name = res.data.name;
					this.cover = res.data.cover;
					this.dizhi = res.data.site;
					this.hours = res.data.business_hours;
					this.community = res.data.community;
					this.note = res.data.note;
					this.business = res.data.business;
				}
				console.log('获取商家信息 :>> ', res);
			}
		},
		//获取供货商信息
		async getshop() {
			if (this.uid) {
				const res = await this.$api('getshop_ruz', {
					uid: this.uid
				});
				console.log('dddddddddddd', res);
				if (res) {
					this.username = res.name;
					this.phone = res.mobile;
					this.remak = res.note;
					//this.$showMsg(res)
				}
			}
		},
		// 获取用户的id
		async getUsers() {
			const res = await this.$api('user.info');

			this.uid = res.data.id;
			this.getBus();
			this.getshop();
		},
		getMap() {
			uni.chooseLocation({
				success: function(res) {
					console.log('位置名称：' + res.name);
					console.log('详细地址：' + res.address);
					console.log('纬度：' + res.latitude);
					console.log('经度：' + res.longitude);
					var dizhi = res.address;
					uni.setStorageSync('dizhi', dizhi);
				}
			});
		},
		getMap1() {
			uni.chooseLocation({
				success: function(res) {
					console.log('位置名称：' + res.name);
					console.log('详细地址：' + res.address);
					console.log('纬度：' + res.latitude);
					console.log('经度：' + res.longitude);
					var dizhi2 = res.name + ', ';
					uni.setStorageSync('dizhi2', dizhi2);
				}
			});
		},
		jump(path, query) {
			this.$Router.push({
				path: path,
				query: query
			});
		},
		// 商户入驻

		async merchSettled() {
			if (
				this.username &&
				this.phone &&
				this.name &&
				this.cover &&
				this.dizhi &&
				this.hours &&
				this.community &&
				this.note &&
				this.business
			) {
				let reg = /^\d{2}:\d{2}-\d{2}:\d{2}$/;
				console.log('reg.test(this.hours) :>> ', reg.test(this.hours));
				if (reg.test(this.hours)) {
					const res = await this.$api('merchSettled', {
						uid: this.uid,
						username: this.username,
						phone: this.phone,
						name: this.name,
						cover: this.cover,
						site: this.dizhi,
						hours: this.hours,
						community: this.community,
						note: this.note,
						business: this.business
					});
					console.log('商户入驻 :>> ', res);
					var sid = res.sid;
					uni.setStorageSync('ssid', sid);
					uni.$showMsg(res.msg);
					this.jump('pages/user/tiaozhuang');
				} else {
					uni.$showMsg('请输入正确的营业时间格式, 例如12:00-22:00');
				}
			} else {
				uni.$showMsg('不能为空');
			}
		},
		//提交供货商信息
		async merchSettled_a() {
			console.log(this.uid, this.username, this.phone);
			if (this.username == '' || this.phone == '') {
				uni.$showMsg('信息不能为空');
			} else {
				const res = await this.$api('shop_ruz', {
					uid: this.uid,
					name: this.username,
					mobile: this.phone,
					note: this.remak
				});
				this.jump('pages/user/tiaozhuang');
				console.log(res);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.page_box {
	// /deep/ .u-delete-icon{
	// 	display: none;
	// 	background-color: none;
	// }
	.content {
		padding: 30rpx;

		.info {
			width: 690rpx;
			// height: 450rpx;
			background: #ffffff;
			box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
			border-radius: 20rpx;
			padding: 31rpx;
			.surroundings {
				// width: 690rpx;
				// 	// height: 282rpx;190rpx
				// 	background: #ffffff;
				// 	box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
				// 	border-radius: 20rpx;
				// 	margin-top: 30rpx;
				// 	padding: 31rpx;
				//margin-left: 13px;
				border-bottom: 1px solid #f1eded;
				text {
					font-size: 36rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-bottom: 20rpx;

					// .u-upload {
					// 	width: 168rpx;
					// 	height: 168rpx;
					// 	border: 1rpx solid #e0e0e0;
					// 	border-radius: 6rpx;
					// }
				}

				// text:before {
				// 	content: '*';
				// 	color: #ff0000;
				// }
			}
			.info1,
			.info2,
			.info4 {
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				height: 131rpx;
				border-bottom: 2rpx solid #f1eded;
				text {
					font-size: 36rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-bottom: 10rpx;
				}

				text:before {
					content: '*';
					color: #ff0000;
				}
				/deep/ .u-input {
					width: 100%;
					height: 50rpx;
					line-height: 50rpx;

					/deep/ .u-input__input {
						width: 100%;
						height: 50rpx;
						line-height: 50rpx;
					}
					.u-input__right-icon {
						display: none;
					}
				}

				.inputStyle {
					font-size: 30rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
		}
		.protocol {
			display: flex;
			justify-content: center;
			margin-top: 50rpx;
		}

		.applyToSettleIn {
			button {
				margin-top: 67rpx;
				width: 100%;
				height: 100rpx;
				background: linear-gradient(90deg, #ffa73d, #ffdd65);
				border-radius: 50rpx;
				font-size: 36rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
		}
	}
}
</style>
